<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>门票</title>
    <link rel="stylesheet" href="css/search.css">
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/getParameter.js"></script>

    <style>
        a {
            text-decoration: none;
        }

        .my_ul li {
            float: left;
            margin-right: 14px;
            height: 30px;
            text-align: center;
            border-radius: 10px;
            margin-top: 25px;
        }

        .my_ul li a {
            line-height: 30px;
            text-decoration: none;
            color: #000;
            font-size: 16px;
        }

        .my_ul li a:hover {
            color: #ff7129;
        }

        .select {
            background: #ff8b46;
            color: white;
        }

    </style>
</head>
<body>

<!--引入头部-->
<jsp:include page="../common/header.jsp"></jsp:include>


<div class="page_one">
    <div class="contant">
        <!-- 顶部景点搜索条件选择 -->
        <table width="1200">
            <tr>
                <th width="100px" height="60px" style="padding-top: 27px;">景点主题：</th>

                <td>
                    <!-- 景点主题选择 -->
                    <ul class="my_ul" id="theme_ul">
                    </ul>
                </td>
            </tr>
            <tr>
                <th style="margin-top: 30px;position: absolute;">景点地区：</th>

                <td>
                    <!-- 景点地区（省份）选择 -->
                    <ul class="my_ul" id="province_ul">
                    </ul>
                </td>
            </tr>
            <tr style="display: none;" id="city_tr">
                <th height="70px" style="margin-top: 30px;position: absolute;">所属城市：</th>

                <td>
                    <!-- 所属城市选择 -->
                    <ul class="my_ul" id="city_ul">
                    </ul>
                </td>
            </tr>
            <tr>
                <td style="padding-top: 10px;" colspan="2">
                    <!-- 所属城市选择 -->
                    <ul class="my_ul" id="">
                        <button>销量</button>
                        <button style="margin-left: 22px;">点评量</button>
                        <button style="margin-left: 22px;">价格</button>
                        <input type="text" id="lowPrice" style="border: 1px solid black;padding-left: 4px;" size="10"/>
                        <span>--</span>
                        <input type="text" id="hightPrice" style="border: 1px solid black;padding-left: 4px;" size="10"/>
                        <button id="query">查询</button>
                    </ul>
                </td>
            </tr>
        </table>
        <br/>
        <div class="crumbs">
            <img src="images/search.png" alt="">
            <p>爱旅行><span>搜索结果</span></p>
        </div>
        <div class="xinxi clearfix">
            <div class="left">
                <div class="header">
                    <span>商品信息</span>
                    <span class="jg">价格</span>
                </div>
                <ul id="route">

                </ul>
                <div class="page_num_inf">
                    <i></i> 共
                    <span id="totalPage">12</span>页<span id="totalCount">132</span>条
                </div>
                <div class="pageNum">
                    <ul id="pageNum">
                        <li><a href="">首页</a></li>
                        <li class="threeword"><a href="#">上一页</a></li>
                        <li class="curPage"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li class="threeword"><a href="javascript:;">下一页</a></li>
                        <li class="threeword"><a href="javascript:;">末页</a></li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <div class="hot">HOT</div>
                    <span>热门推荐</span>
                </div>
                <ul id="hot_sight_ul">
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--引入尾部-->
<jsp:include page="../common/footer2.jsp"></jsp:include>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/getParameter.js"></script>
<script>

    var themeId = ""; // 景点主题id
    var provinceId = ""; // 景点地区id（省份id）
    var cityId = ""; // 所属城市id

    // 景点主题a标签点击事件：获得景点主题id
    function getSightThemeId(a, id) {
        themeId = id;
        $(a).css("color", "white");
        $(a).parent().siblings().children().css("color", "black");
        $(a).parent().addClass("select").siblings().removeClass("select");

        // 查询景点
        findSightByCondition(themeId, provinceId, cityId, 1);
    }

    // 景点地区a标签点击事件：获得省份id，并查找该省份下的所有城市
    function getProvinceId(a, id) {
        provinceId = id;

        // 判断是否选择了全部省份（即省份id为空或为null）
        if (provinceId == "" || provinceId == null) {
            // 如果省份id为空，则一定要将城市id置为空
            cityId = "";
        }

        $(a).css("color", "white");
        $(a).parent().siblings().children().css("color", "black");
        $(a).parent().addClass("select").siblings().removeClass("select");

        // 判断当前的选择是否为全部
        if ($(a).parent().text() == "全部") {
            // 使城市所在的一行隐藏
            $("#city_tr").css("display", "none");
        } else {
            // 使城市所在的一行显示出来
            $("#city_tr").css("display", "");
        }


        //查询景点所属城市数据（省份对应的城市）
        $.post("city/findCityByProvinceId", {provinceId: provinceId}, function (data) {
            // 判断是否查找成功
            if (typeof (data.flag) == "undefined") {
                // 拼接一个全部
                var lis = '<li class="select"><a href="javascript:void(0);" onclick="getCityId(this)">全部</a></li>';

                //遍历数组,拼接字符串(<li>)
                for (var i = 0; i < data.length; i++) {
                    var li = '<li><a href="javascript:void(0);"'
                        + ' onclick=getCityId(this,"'
                        + data[i].cityId + '")' + '>'
                        + data[i].cityName + '</a></li>';
                    lis += li;
                }

                //将lis字符串，设置到ul的html内容中
                $("#city_ul").html(lis);
            }
        });

        // 查询景点
        findSightByCondition(themeId, provinceId, cityId, 1);

    }

    // 景点主题a标签点击事件：获得景点主题id
    function getCityId(a, id) {
        cityId = id;
        $(a).css("color", "white");
        $(a).parent().siblings().children().css("color", "black");
        $(a).parent().addClass("select").siblings().removeClass("select");

        // 查询景点
        findSightByCondition(themeId, provinceId, cityId, 1);
    }

    $(function () {

        //查询景点主题数据
        $.post("sight_theme/findAllTheme", {}, function (data) {
            // 判断是否查找成功
            if (typeof (data.flag) == "undefined") {
                // 拼接一个全部主题
                var lis = '<li class="select"><a href="javascript:void(0);" onclick="getSightThemeId(this);">全部</a></li>';

                //遍历数组,拼接字符串(<li>)
                for (var i = 0; i < data.length; i++) {
                    var li = '<li><a href="javascript:void(0);"'
                        + ' onclick=getSightThemeId(this,"'
                        + data[i].themeId + '")' + '>'
                        + data[i].themeName + '</a></li>';
                    lis += li;
                }

                //将lis字符串，设置到ul的html内容中
                $("#theme_ul").html(lis);

            }
        });

        //查询最热景点数据
        $.post("sight/findHotestSight", {}, function (lists) {

            // 判断是否查找成功
            if (typeof (lists.flag) == "undefined") {
                var lis = "";

                //遍历map集合
                for (var j = 0; j < lists.length; j++) {
                    var sight = lists[j];

                    var doller = "&yen;";
                    var start = "起";
                    var price = sight.lowestPrice;
                    var introduce = ""; // 景点描述

                    if (price == 0) {
                        doller = "";
                        start = "";
                        price = "";
                    }

                    if (sight.introduce != null) {
                        introduce = sight.introduce;
                    }

                    var li = '<li><a href=' + sight.sightId + '"sight_detail.jsp?sightId=">\n' +
                        '                        <div class="left"><img src="' + sight.sightImg + '" alt=""></div>\n' +
                        '                        <div class="right">\n' +
                        '                            <p>' + introduce + '</p>\n' +
                        '                            <p><span>' + doller + '<span>' + price + '</span>' + start + '</span>\n' +
                        '                            </p>\n' +
                        '                        </div>\n' +
                        '                    </a></li>';
                    lis += li;
                }
                //将lis字符串，设置到ul的html内容中
                $("#hot_sight_ul").html(lis);

            }
        });

        //查询景点地区（省份）数据
        $.post("province/findAllProvince", {}, function (data) {
            // 判断是否查找成功
            if (typeof (data.flag) == "undefined") {
                // 拼接一个全部
                var lis = '<li class="select"><a href="javascript:void(0);" onclick="getProvinceId(this);">全部</a></li>';

                //遍历数组,拼接字符串(<li>)
                for (var i = 0; i < data.length; i++) {
                    var li = '<li><a href="javascript:void(0);"'
                        + ' onclick=getProvinceId(this,"'
                        + data[i].provinceId + '")' + '>'
                        + data[i].provinceName + '</a></li>';
                    lis += li;
                }

                //将lis字符串，设置到ul的html内容中
                $("#province_ul").html(lis);

            }
        });

    });


    $(function () {
        findSightByCondition(null, null, null, null);
    });

    // 价格区间查询按钮
    $("#query").click(function () {
        findSightByCondition(themeId, provinceId, cityId, 1);
    });

    var search =  getParameter("search");

    function findSightByCondition(themeId, provinceId, cityId, currentPage) {
        // 对search进行解码
        var searchVal = decodeURI(search);
        //发送ajax请求
        $.post("sight/queryPageByCondition", {
            themeId: themeId,
            provinceId: provinceId,
            cityId: cityId,
            currentPage: currentPage,
            search: searchVal,
            lowPrice: $("#lowPrice").val(),
            heightPrice: $("#heightPrice").val()
        }, function (pb) {
            //解析pagebean数据，展示到页面上
            //1.分页工具条数据展示
            //1.1 展示总页码和总记录数
            $("#totalPage").html(pb.totalPage);
            $("#totalCount").html(pb.totalCount);

            var lis = "";

            var fristPage = '<li onclick="javascipt:findSightByCondition(\'' + themeId + '\', \'' + provinceId + '\', \'' + cityId + '\', \'' + 1 + '\')"><a href="javascript:void(0)">首页</a></li>';

            //计算上一页的页码
            var beforeNum =  pb.currentPage - 1;
            if(beforeNum <= 0){
                beforeNum = 1;
            }
            //计算下一页的页码
            var next =  pb.currentPage + 1;
            if(next > pb.totalCount){
                next = pb.totalCount;
            }

            var beforePage = '<li onclick="javascipt:findSightByCondition(\'' + themeId + '\', \'' + provinceId + '\', \'' + cityId + '\', \'' + beforeNum + '\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

            lis += fristPage;
            lis += beforePage;
            //1.2 展示分页页码
            /*
                1.一共展示10个页码，能够达到前5后4的效果
                2.如果前边不够5个，后边补齐10个
                3.如果后边不足4个，前边补齐10个
            */

            // 定义开始位置begin,结束位置 end
            var begin; // 开始位置
            var end; // 结束位置


            //1.要显示10个页码
            if (pb.totalPage < 10) { // 总页码不够10页
                begin = 1;
                end = pb.totalPage;
            } else { // 总页码超过10页
                begin = pb.currentPage - 5;
                end = pb.currentPage + 4;

                //2.如果前边不够5个，后边补齐10个
                if (begin < 1) {
                    begin = 1;
                    end = begin + 9;
                }

                //3.如果后边不足4个，前边补齐10个
                if (end > pb.totalPage) {
                    end = pb.totalPage;
                    begin = end - 9;
                }
            }

            for (var i = begin; i <= end; i++) {
                var li;
                //判断当前页码是否等于i
                if (pb.currentPage == i) {

                    li = '<li class="curPage" onclick="javascipt:findSightByCondition(\'' + themeId + '\', \'' + provinceId + '\', \'' + cityId + '\', \'' + i + '\')"><a href="javascript:void(0)">' + i + '</a></li>';

                } else {
                    //创建页码的li
                    li = '<li onclick="javascipt:findSightByCondition(\'' + themeId + '\', \'' + provinceId + '\', \'' + cityId + '\', \'' + i + '\')"><a href="javascript:void(0)">' + i + '</a></li>';
                }
                //拼接字符串
                lis += li;
            }

            var lastPage = '<li onclick="javascipt:findSightByCondition(\'' + themeId + '\', \'' + provinceId + '\', \'' + cityId + '\', \'' + pb.totalCount + '\')" class="threeword"><a href="javascript:;">末页</a></li>';
            var nextPage = '<li onclick="javascipt:findSightByCondition(\'' + themeId + '\', \'' + provinceId + '\', \'' + cityId + '\', \'' + next + '\')" class="threeword"><a href="javascript:;">下一页</a></li>';

            lis += nextPage;
            lis += lastPage;

            //将lis内容设置到 ul
            $("#pageNum").html(lis);

            //2.列表数据展示
            var route_lis = "";

            for (var j = 0; j < pb.list.length; j++) {

                var sight = pb.list[j];

                var start = "起";
                var doller = "&yen;";
                var price = sight.lowestPrice;
                var introduce = ""; // 景点描述

                if (sight.lowestPrice == 0 || sight.lowestPrice == "0") {
                    doller = "";
                    start = "";
                    price = "";
                }

                if (sight.introduce != null) {
                    introduce = sight.introduce;
                }

                var li = '<li>\n' +
                    '                        <div class="img"><img src="' + sight.sightImg + '" style="width: 299px;"></div>\n' +
                    '                        <div class="text1">\n' +
                    '                            <p>' + sight.sightName + '</p>\n' +
                    '                            <br/>\n' +
                    '                            <p>' + introduce + '</p>\n' +
                    '                        </div>\n' +
                    '                        <div class="price">\n' +
                    '                            <p class="price_num">\n' +
                    '                                <span>' + doller + '</span>\n' +
                    '                                <span>' + price + '</span>\n' +
                    '                                <span>' + start + '</span>\n' +
                    '                            </p>\n' +
                    '                            <p><a target="_blank" href="pages/sight/sight_detail.jsp?sightId=' + sight.sightId + '">查看详情</a></p>\n' +
                    '                        </div>\n' +
                    '                    </li>';
                route_lis += li;
            }

            $("#route").html(route_lis);

            // //定位到页面顶部
            // window.scrollTo(0, 0);
        });

    }


</script>
</body>

</html>